<template>
    <nav class="bottom-nav">
      <RouterLink to="/" class="nav-item">
        <img class="default-icon" src="@/assets/tabbar/frame.png" alt="首页">
        <img class="active-icon" src="@/assets/tabbar/frame-select.png" alt="首页激活">
      </RouterLink>
      <RouterLink to="/product" class="nav-item">
        <img class="default-icon" src="@/assets/tabbar/shop.png" alt="发现">
        <img class="active-icon" src="@/assets/tabbar/shop-select.png" alt="发现激活">
      </RouterLink>
      <RouterLink to="/myCustom" class="nav-item">
        <img class="default-icon" src="@/assets/tabbar/edit.png" alt="消息">
        <img class="active-icon" src="@/assets/tabbar/edit-select.png" alt="消息激活">
      </RouterLink>
      <RouterLink to="/my" class="nav-item">
        <img class="default-icon" src="@/assets/tabbar/user.png" alt="我的">
        <img class="active-icon" src="@/assets/tabbar/user-select.png" alt="我的激活">
      </RouterLink>
    </nav>
  </template>
  
  <style scoped>
    /* 新增图标尺寸控制 */
.nav-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
    /* 新增图标切换逻辑 */
    .nav-item .active-icon {
    display: none;
    }
    .nav-item.router-link-active .default-icon {
    display: none;
    }
    .nav-item.router-link-active .active-icon {
    display: block;
    }
  .bottom-nav {
    /* 保持原有布局样式不变 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px; /* 适当增加高度 */
    display: flex;
    background: var(--color-background-soft);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  
  .nav-item {
    /* 保持原有flex布局 */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  </style>